<template>
	<div class="color-blocks">
		<div class="item" v-for="(item, index) in list" :key="'color' + index">
			<span class="color" :style="{ backgroundColor: item.color }"></span>
			{{ item.label }}
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			list: [
				{ label: "待服务", color: "#156DFF" },
				{ label: "已开单", color: "#67c23a" },
				{ label: "占用", color: "#bcbfc5" }
			]
		};
	}
};
</script>
<style lang="scss" scoped>
.color-blocks {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 10;
	display: flex;
	background: #fff;
	padding: 5px;
	border-radius: 4px;
	box-shadow: 0 2px 12px 0 #0000001a;
	user-select: none;
	.item {
		padding: 5px 10px;
		.color {
			display: inline-block;
			width: 10px;
			height: 10px;
		}
	}
}
</style>
